<template>
  <div class="health">
    <el-container>
      <el-input
        style="width: 20%"
        placeholder="预约档案号/姓名"
        v-model="parameter.content"
        clearable
      ></el-input>
      <el-button
        type="primary"
        size="mini"
        @click="onSubmit"
        icon="el-icon-search"
        round
        >查询</el-button
      >
    </el-container>
    <el-container>
      <el-button
        type="success"
        size="mini"
        icon="el-icon-circle-plus"
        @click.native="addChaselectAllTQuestion()"
        round
        >添加</el-button
      >
    </el-container>
    <el-table
      style="width: 100%"
      align="center"
      :data="AllUser"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="预约档案号" prop="tMemberId" width="120">
      </el-table-column>
      <el-table-column label="体检人姓名" prop="tBodyName" width="120">
      </el-table-column>
      <el-table-column label="评估时间" prop="createtime" width="180">
      </el-table-column>
      <el-table-column label="气虚质" prop="tQiAsthenia" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.tQiAsthenia <= '2'"> 否 </span>
          <span v-if="scope.row.tQiAsthenia > '2'"> 是 </span>
        </template>
      </el-table-column>
      <el-table-column label="阳虚质" prop="tYangQuality" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.tYangQuality <= '2'"> 否 </span>
          <span v-if="scope.row.tYangQuality > '2'"> 是 </span>
        </template>
      </el-table-column>
      <el-table-column label="阴虚质" prop="tYinDeficiency" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.tYinDeficiency <= '2'"> 否 </span>
          <span v-if="scope.row.tYinDeficiency > '2'"> 是 </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            round
            type="primary"
            size="mini"
            @click.native="update(scope.row)"
            icon="el-icon-edit"
          >
            修改
          </el-button>
          <el-button
            round
            type="danger"
            size="mini"
            @click.native="deleteRow(scope.row,scope.$index, AllUser)"
            icon="el-icon-delete"
          >
            删除
          </el-button>
          <el-button
          round
            type="primary"
            size="mini"
            @click.native="chadetail(scope.row)"
            icon="el-icon-more"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="parameter.page"
      :page-sizes="[2, 5, 10, 20]"
      :pager-count="9"
      background
      :page-size.sync="parameter.num"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <el-dialog :visible.sync="dialogFormVisible">
      <div class="bao">
        <div class="title">{{ tilte }}</div>

        <div class="from">
          <div class="Where">
            <el-input
              size="mini"
              class="input"
              @blur="cha()"
              v-model="user.tmerberid"
              :disabled="isab"
              
              placeholder="请输入档案号"
            ></el-input>
            <el-input
              size="mini"
              class="input"
              readonly
              v-model="user.tusername"
            ></el-input>
            <el-button size="mini" class="button" type="primary"
              >查询</el-button
            >
          </div>
          <div class="Info">
            <div class="input">
              <el-input
                size="mini"
                :value="user.tusersex == 1 ? '男' : '女'"
                readonly
              >
                <template slot="prepend">性别</template>
              </el-input>
            </div>
            <div style="margin-left: 20px" class="input">
              <el-input size="mini" v-model="user.tuserage" readonly>
                <template slot="prepend">年龄</template>
              </el-input>
            </div>
          </div>
        </div>
        <el-tabs type="border-card">
          <el-tab-pane
            class="Content"
            v-for="(item, ParentIndex) in this.AllTQuestion"
            :key="ParentIndex"
            :label="item.tphysiqueName + ''"
          >
            <el-container>
              <p>请根据最近一年的感觉来填写下列问题：</p>
            </el-container>
            <form method="post" action="URL">
              <ol>
                <div class="wenjuan">
                  <li
                    v-for="(items, ChildIndex) in item.tquestionTableList"
                    :key="ChildIndex"
                  >
                    <el-row>
                      <el-col :span="10" align="left">{{ items.tIssueContent }}</el-col>
                      <el-col :span="14" align="right">
                        <label
                          ><input
                            @change="inputChange(ParentIndex, ChildIndex, 1)"
                            class="radio"
                            type="radio"
                            :name="item.tphysicalIdentity + '' + ChildIndex"
                            value="1"
                            :checked="isCheck(items.tIssueId, 1)"
                            required
                          />&nbsp;&nbsp;无&nbsp;&nbsp;
                        </label>
                        <label
                          ><input
                            @change="inputChange(ParentIndex, ChildIndex, 2)"
                            class="radio"
                            type="radio"
                            :name="item.tphysicalIdentity + '' + ChildIndex"
                            value="2"
                            :checked="isCheck(items.tIssueId, 2)"
                          />&nbsp;&nbsp;有时&nbsp;&nbsp;
                        </label>
                        <label
                          ><input
                            @change="inputChange(ParentIndex, ChildIndex, 3)"
                            class="radio"
                            type="radio"
                            :name="item.tphysicalIdentity + '' + ChildIndex"
                            value="3"
                            :checked="isCheck(items.tIssueId, 3)"
                          />&nbsp;&nbsp;一般&nbsp;&nbsp;
                        </label>
                        <label
                          ><input
                            @change="inputChange(ParentIndex, ChildIndex, 4)"
                            class="radio"
                            type="radio"
                            :name="item.tphysicalIdentity + '' + ChildIndex"
                            value="4"
                            :checked="isCheck(items.tIssueId, 4)"
                          />&nbsp;&nbsp;经常&nbsp;&nbsp;
                        </label>
                        <label
                          ><input
                            @change="inputChange(ParentIndex, ChildIndex, 5)"
                            class="radio"
                            type="radio"
                            :name="item.tphysicalIdentity + '' + ChildIndex"
                            value="5"
                            :checked="isCheck(items.tIssueId, 5)"
                          />&nbsp;&nbsp;严重
                        </label>
                      </el-col>
                    </el-row>
                    <span style="width:100px;">
                    </span>
                  </li>
                </div>
              </ol>
              <br />
            </form>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer" class="dialog-footer" v-show="isok">
        <el-button round @click="dialogFormVisible = false">取 消</el-button>
        <el-button round type="primary" @click="add()">确 定</el-button>
      </div>
      <div slot="footer" class="dialog-footer" v-show="isok2">
        <el-button round @click="dialogFormVisible = false">取 消</el-button>
        <el-button round type="primary" @click="updateUserTQues()">编 辑</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import Vue from "vue";
export default Vue.extend({
  data() {
    return {
      loading: true,
      AllUser: [],
      parameter: {
        page: 1,
        num: 5,
        content: "",
      },
      isok: false,
      isok2: false,
      isab:false,
      tilte: "",
      user: {
        tmerberid: "",
        tusername: "",
        tuserage: "",
        tusersex: "",
        toOrderno:""
      },
      adduserconstitution: [],
      radioVals: [],
      total: 0,
      multipleSelection: [],
      AllTQuestion: [],
      updateTQuestion: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      readonly: true,
      allAnswer: [],
      updateAllSwer: [],
    };
  },

  methods: {
    //根据档案号去查找人群分类里面是否含有本档案号
    deleteRow(scope,index,allList){
      let id=scope.tMemberId;
      console.log(scope.tMemberId)
      axios.post("/api/lqHealth/deleteSelectByTInterpose",{tmerber:id}).then(res=>{
        if(res.data>0){
               this.$message({
               type: 'error',
             message: '本会员已进行人群分类要删除的话先改变人群分类'
           });  
        }else{
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          allList.splice(index,1)
           //删除 t_body_type体质检测 t_user_constitution_table体质用户选择
          axios.post("/api/lqHealth/deleteTcDlBytermer",{tmerber:id}).then(res=>{
            console.log(res.data)
          })
          if(allList.length==0){
            this.parameter.page+=1
            this.load()
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        }) 
        }
      })
    },
   
    //根据id去查找预约成功的人员
    cha() {
      if (this.user.tmerberid != "") {
        axios
          .post("/api/lqHealth/tOrderBytmerber", {
            tmerber: this.user.tmerberid,
          })
          .then((res) => {
            if (res.data != "") {
              (this.user.tmerberid = res.data.memberId),
                (this.user.tusername = res.data.tmember_lcj.name),
                (this.user.tuserage = res.data.tmember_lcj.age),
                (this.user.toOrderno = res.data.toOrderno),
                (this.user.tusersex = res.data.tmember_lcj.sex);
            } else {
              this.$message({
                type: "error",
                message: "请输入已预约的正确会员编号!",
              });
            }
          });
      } else {
        this.$message({
          type: "error",
          message: "请输入会员档案号!",
        });
      }
    },
    //提交修改数据
    updateUserTQues() {
      axios
        .post("/api/lqHealth/updateuserconstitution", {
          user: JSON.stringify(this.user),
          updateAllSwer: JSON.stringify(this.updateAllSwer),
        })
        .then((rps) => {
          if (rps.data > 0) {
            this.$message({
              type: "success",
              message: "编辑成功!",
            });
            this.dialogFormVisible = false;
            this.load();
          }
        });
    },
    //判断按钮的选中
    isCheck(tIssueId, val) {
      //将后台数据转化成数组
      let el = Object.keys(this.radioVals).length;
      let arr = Object.keys(this.radioVals);
      let bool = false;
      for (let i = 0; i < el; i++) {
        if (this.radioVals[arr[i]].length > 0) {
          this.radioVals[arr[i]].forEach((arr) => {
            if (tIssueId == arr.id && val == arr.val) {
              bool = true;
            }
          });
        }
      }
      return bool;
    },
    //绑定选中的按钮
    inputChange(ParentIndex, ChildIndex, val) {
      this.allAnswer[ParentIndex].arr[ChildIndex].val = val;
      if (this.isok2) {
        this.updateAllSwer[ParentIndex].arr[ChildIndex].val = val;
      }
    },
    //查找
    onSubmit() {
      this.load();
    },
    //所有的题目并进行映射 创建一个数组格式的数据
    SelectAllTQuestion() {
      this.allAnswer = [];
      let allarr = [];
      axios.get("/api/lqHealth/selectAllTQuestion").then((res) => {
        this.AllTQuestion = res.data;
        this.updateTQuestion = res.data;
        res.data.forEach((item) => {
          let arr = [];
          item.tquestionTableList.forEach((ChlidItem) => {
            arr.push({ id: ChlidItem.tIssueId, val: "" });
          });
          allarr.push({ id: item.tphysiqueId, arr: arr });
        });
      });
      this.allAnswer = allarr;
    },
    //提交添加数据
    addChaselectAllTQuestion() {
      this.updateAllSwer = [];
      this.AllTQuestion = [];
      this.tilte = "新增";
      this.isok = true;
      this.isok2 = false;
      this.radioVals = [];
      this.dialogFormVisible = true;
      this.user.tmerberid ="";
      this.user.tusername ="";
      this.user.tuserage = "";
      this.user.tusersex ="";
      this.user.toOrderno=""; 
      this.SelectAllTQuestion();
    },
    //分页加载
    load() {
      axios
        .post("/api/lqHealth/selectAllTbodyType", this.parameter)
        .then((res) => {
          this.AllUser = res.data.list;
          this.parameter.page = res.data.pageNum;
          this.parameter.num = res.data.pageSize;
          this.total = res.data.total;

          //加载样式
        setTimeout(() => {
          this.loading=false;
        }, 1000);
        });
    },
    handleSizeChange() {
      this.load();
    },
    handleCurrentChange() {
      this.load();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //查找本身详情
    chadetail(ScopeRow) {
      this.isok = false;
      this.isok2 = false;
      this.isab=true,
      this.tilte = "详情";
      let a = ScopeRow.tMemberId;
      this.AllTQuestion = [];
      this.updateAllSwer = [];
      axios
        .post("/api/lqHealth/tcLastBean", { tMemberId: a })
        .then((rsData) => {
          (this.user.tmerberid = rsData.data.tmerberId),
            (this.user.tusername = rsData.data.tuserName),
            (this.user.tuserage = rsData.data.tuserAge),
            (this.user.tusersex = rsData.data.tuserSex);
          axios
            .post("/api/lqHealth/selectAllTUserConstitution", { tMemberId: a })
            .then((res) => {
              console.log(res.data);
              this.radioVals = res.data;
              this.dialogFormVisible = true;
              this.SelectAllTQuestion();
            });
        });
    },
    //修改映射并创建绑定数组类型数据
    update(ScopeRow) {
      let a = ScopeRow.tMemberId;
      this.AllTQuestion = [];
      this.isok = false;
      this.isok2 = true;
       this.isab=true,
      this.tilte = "修改";
      axios
        .post("/api/lqHealth/tcLastBean", { tMemberId: a })
        .then((rsData) => {
          (this.user.tmerberid = rsData.data.tmerberId),
            (this.user.tusername = rsData.data.tuserName),
            (this.user.tuserage = rsData.data.tuserAge),
            (this.user.tusersex = rsData.data.tuserSex);
          axios
            .post("/api/lqHealth/selectAllTUserConstitution", { tMemberId: a })
            .then((res) => {
              this.radioVals = res.data;
              this.dialogFormVisible = true;
              this.SelectAllTQuestion();
              let el = Object.keys(this.radioVals).length;
              let kou = Object.keys(this.radioVals);
              let allarr = [];
              for (let i = 0; i < el; i++) {
                if (this.radioVals[kou[i]].length > 0) {
                  let arr = [];
                  this.radioVals[kou[i]].forEach((zhi) => {
                    arr.push({ id: zhi.id, val: zhi.val });
                  });
                  allarr.push({ id: i + 1, arr: arr });
                }
              }
              this.updateAllSwer = allarr;
            });
        });
    },
    //提交添加数据
    add() {
      let mark = true;

      this.allAnswer.forEach((item) => {
        item.arr.forEach((e) => {
          if (e.val == "") {
            mark = false;
          }
        });
      });
      if (this.user.tusername != "") {
        if (mark) {
          axios
            .post("/api/lqHealth/adduserconstitution", {
              user: JSON.stringify(this.user),
              allAnswer: JSON.stringify(this.allAnswer),
            })
            .then((rps) => {
              if (rps.data > 0) {
                this.$message({
                  type: "success",
                  message: "添加成功!请继续完成心理测试",
                });
                this.dialogFormVisible = false;
                this.load();
              }else{
                  this.$message({
            type: "error",
            message: "用户已经进行了体质添加!",
          });
              }
            });
        } else {
          this.$message({
            type: "error",
            message: "请将答卷填写完成!",
          });
        }
      } else {
        this.$message({
          type: "error",
          message: "请输入预约会员档案号再进行添加!",
        });
      }
    },
  },
  created() {
    this.load();
  },
});
</script>
<style scoped>
.bao {
  width: 100%;
}
.bao .title {
  width: 100%;
  height: 50px;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 20px;
  border-bottom: 1px solid #eee;
}
.Content {
  height: 200px;
  overflow: auto;
}
.Content::-webkit-scrollbar {
  width: 0px;
}

.from {
  width: 100%;
  height: 90px;
  margin: 10px 0px;
}
.from .Where {
  width: 100%;

  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.from .Where .input {
  width: 35%;
}
.from .Where .button {
  width: 15%;
}

.from .Info {
  width: 100%;

  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.from .info .input {
  width: 35%;
}
.wenjuan {
  float: left;
}
form {
  line-height: 300%;
}
</style>